<template>
  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="echart2" id="mychart2"
    style="width: 100%; height: 100%"></div>
</template>
    
    <script>
  import * as echarts from "echarts";
  import { ShouyeZongRightTWO } from "../../https/api/user";
  export default {
    data() {
      return {
        xData:[],
        yData: [],
        time: "",
      };
    },
    mounted() {
      // this.initEcharts();
      this.DingBanZheXian()
      this.time = setInterval(() => {
        this.DingBanZheXian();
      }, 5000);
    },
    methods: {
      DingBanZheXian() {
        const data ={
          abcd : 1
        }
        ShouyeZongRightTWO(data).then((res) => {
        if (res) {
          // console.log("首页右侧折线提111", res);
          this.xData = res[0].mgyls.map((i) => i.location);
          this.yData = res[0].mgyls.map((i) => i.value);
        
        }
     
        this.initEcharts();

      });
    },
      initEcharts() {
        // 基本柱状图
        var option = {
          // backgroundColor: "#FFF0F5",
  
  
          legend: {
            
            textStyle: {
              color: [],
            },
          },
  
          //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
          grid: {
            top: 35,
            left: 30,
            right: 30,
            bottom: 35,
          },
  
          // 提示框
          tooltip: {
            trigger: "axis",
          },
          dataZoom: [
          {
            type: "inside", //无滑动条内置缩放   type: 'slider', //缩放滑动条
            show: true, //开启
            xAxisIndex: [0], //Y轴滑动
            //  xAxisIndex: [0],//X轴滑动
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100, //初始化时，滑动条宽度结束标度
          },
        ],
          //工具框，可以选择
          // toolbox: {
          //   feature: {
          //     saveAsImage: {}, //下载工具
          //   },
          // },
  
          xAxis: {
            name: "",
            type: "category",
            axisLine: {
              lineStyle: {
                // 设置x轴颜色
                color: "rgb(101,129,218)",
              },
            },
            // 设置X轴数据旋转倾斜
            axisLabel: {
              rotate: -15, //代表逆时针旋转
            },
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            data: this.xData,
          },
  
          yAxis: {
            show: true,
            name: "Kn",
            type: "value",
            min: 0, // 设置y轴刻度的最小值
            // max: 70, // 设置y轴刻度的最大值
            splitNumber: 5, // 设置y轴刻度间隔个数
            axisLine: {
              lineStyle: {
                // 设置y轴颜色
                color: "#87CEFA",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#87CEFA",
                type: "dashed",
              },
            },
          },
  
          series: [
            {
          
              data: this.yData,
              type: "line",
              // 设置小圆点消失
              // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
              symbol: "none",
              // 设置折线弧度，取值：0-1之间
              smooth: 0.5,
            },
  
          
          ],
  
          color: ["rgb(101,129,218)",],
        };
        const myChart = echarts.init(document.getElementById("mychart2"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
      handleMouseEnter() {
        clearInterval(this.time);
      },
      handleMouseLeave() {
        this.time = setInterval(() => {
          this.DingBanZheXian();
        }, 1000);
      },
      },
      beforeDestroy() {
        clearInterval(this.time);
      },
  };
  </script>
    
  